<template>

  <!--西瓜视频播放器的占位-->
  <div id="mse" class="playCss"></div>

</template>

<script>

  // 这是播放器关键代码，必须引入
  import Player from 'xgplayer/dist/simple_player';
  import volume from 'xgplayer/dist/controls/volume';
  import playbackRate from 'xgplayer/dist/controls/playbackRate';
  import play from 'xgplayer/dist/controls/play';
  import fullscreen from 'xgplayer/dist/controls/fullscreen';
  import progress from 'xgplayer/dist/controls/progress';
  import pip from 'xgplayer/dist/controls/pip';
  import flex from 'xgplayer/dist/controls/flex';

  // flv ​注意跨域问题​​​https://sample-videos.com/video123/flv/720/big_buck_bunny_720p_2mb.flv
  import FlvPlayer from "xgplayer-flv";
  // m3u8  测试地址：http://hls.cntv.lxdns.com/asp/hls/main/0303000a/3/default/978a64ddd3a1caa85ae70a23414e6540/main.m3u8
  import HlsJsPlayer from "xgplayer-hls";

  export default {
    // 西瓜视频播放的封装

    // 播放 m3u8 需要安装 npm install --save xgplayer-hls.js
    // 播放http-flv 需要安装 npm install --save xgplayer-flv
    // 视频播放，示例文档：https://v2.h5player.bytedance.com/examples/  文档：https://v2.h5player.bytedance.com/gettingStarted
    // npm install xgplayer -S 西瓜视频
    // PC Web端支持直接播放mp4视频，播放HLS、FLV、MPEG-DASH需要浏览器支持Media Source Extensions
    // 安卓系统Web场景支持直接播放mp4和HLS，播放FLV、MPEG-DASH需要浏览器支持Media Source Extensions

    name: "XiGuaPlayer",
    data(){
      return {
        // 西瓜播放器的实例
        player: null,
        // 视频播放器宽度
        playWidth: 600,
        // 视频播放器高度
        playHeight: 337.5,
      }
    },
    methods: {
      /**
       * 播放视频- 外部访问的接口
       * @param url 播放的地址
       * @param type 选择的播放器，可选参数: mp4,flv,m3u8
       */
      playXiGua(url, type){
        if (this.player){
          // 销毁旧的
          this.player.destroy()
        }
        if (type === 'flv'){
          this.playerFlv(url)
        } else if (type === 'm3u8'){
          this.playerM3u8(url)
        } else {
          this.initXiGua(url)
        }
      },
      /**
       * 播放flv视频
       * @param url 视频地址
       */
      playerFlv(url){
        this.player = new FlvPlayer({
          // 绑定的播放器位置
          id: 'mse',
          // 视频源
          url: url,

          // 详情参数，参考：https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE
          // 播放器大小，默认600, 337.5
          width: this.playWidth,
          height: this.playHeight,
          // 播放器预设音量大小,范围 0 - 1，默认 0.6
          volume: 0.6,
          // 自动播放视频,大多数浏览器厂商不建议播放器自动播放视频,默认不自动播放
          autoplay: true,
          // 设置下载控件显示
          download: true,
          // 开启循环播放，默认不开启
          loop: false,
          // 初始化显示视频首帧,播放器默认不会初始化视频,该配置在移动端无效,该配置与autoplay配置项不可同时设置为true
          videoInit: false,
          // 封面图是当播放器初始化后在用户点击播放按钮前显示的图像  require('@/assets/images
          poster: require('@/assets/images/bg/SeaBreeze.jpg'),
          // 各种插件，播放/暂停、全屏、进度条、音量和画中画插件。
          controlPlugins: [
            playbackRate, // 播放器倍速播放
            volume, //控制条的音量控制组件
            play, // 控制条的播放/暂停按钮
            fullscreen, //控制条的全屏切换组件
            progress, //播放器进度条和预览图
            // pip, // 播放器画中画功能
            flex,
          ],
          //传入倍速可选数组
          playbackRate: [0.5, 0.75, 1, 1.5, 2],
          // 默认倍速
          defaultPlaybackRate: null,
          // 视频起播时间（单位：秒）- 记忆播放
          lastPlayTime: 0,
          // 提示文字展示时长（单位：秒）,默认0
          lastPlayTimeHideDelay: 0,
          // 样式横屏全屏,部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。使用该配置时不需配置rotate和cssFullscreen。
          rotateFullscreen: true,
        });
      },
      /**
       * 播放m3u8
       * @param url 播放的地址
       */
      playerM3u8(url){
        this.player = new HlsJsPlayer({
          // 绑定的播放器位置
          id: 'mse',
          // 视频源
          url: url,

          // 详情参数，参考：https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE
          // 播放器大小，默认600, 337.5
          width: this.playWidth,
          height: this.playHeight,
          // 播放器预设音量大小,范围 0 - 1，默认 0.6
          volume: 0.6,
          // 自动播放视频,大多数浏览器厂商不建议播放器自动播放视频,默认不自动播放
          autoplay: true,
          // 设置下载控件显示
          download: true,
          // 开启循环播放，默认不开启
          loop: false,
          // 初始化显示视频首帧,播放器默认不会初始化视频,该配置在移动端无效,该配置与autoplay配置项不可同时设置为true
          videoInit: false,
          // 封面图是当播放器初始化后在用户点击播放按钮前显示的图像  require('@/assets/images
          poster: require('@/assets/images/bg/SeaBreeze.jpg'),
          // 各种插件，播放/暂停、全屏、进度条、音量和画中画插件。
          controlPlugins: [
            playbackRate, // 播放器倍速播放
            volume, //控制条的音量控制组件
            play, // 控制条的播放/暂停按钮
            fullscreen, //控制条的全屏切换组件
            progress, //播放器进度条和预览图
            // pip, // 播放器画中画功能
            flex,
          ],
          //传入倍速可选数组
          playbackRate: [0.5, 0.75, 1, 1.5, 2],
          // 默认倍速
          defaultPlaybackRate: null,
          // 视频起播时间（单位：秒）- 记忆播放
          lastPlayTime: 0,
          // 提示文字展示时长（单位：秒）,默认0
          lastPlayTimeHideDelay: 0,
          // 样式横屏全屏,部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。使用该配置时不需配置rotate和cssFullscreen。
          rotateFullscreen: true,
        });
      },
      /**
       * 西瓜视频播放器初始化,用于播放 mp4等
       * @param url 要播放的视频
       */
      initXiGua(url){
        this.player = new Player({
          // 绑定的播放器位置
          id: 'mse',
          // 视频源
          url: url,
          // 设置为流式布局，可使播放器宽度跟随父元素的宽度大小变化，且高度按照配置项中的高度和宽度的比例来变化（播放器宽高未设置时按照内部默认值来计算）。
          // 还可以设置为自适应视频内容。该参数就是设置大小的关键（http://v2.h5player.bytedance.com/config/#流式布局）
          fluid: true,
          // 使移动端支持双击暂停/播放,否则单击就暂停了
          enableVideoDbltouch:true,

          // 详情参数，参考：https://v2.h5player.bytedance.com/config/#%E5%BF%85%E9%80%89%E9%85%8D%E7%BD%AE
          // 播放器大小，默认600, 337.5
          // width: this.playWidth,
          // height: this.playHeight,
          // 播放器预设音量大小,范围 0 - 1，默认 0.6
          volume: 1,
          // 自动播放视频,大多数浏览器厂商不建议播放器自动播放视频,默认不自动播放
          autoplay: true,
          // 开启循环播放，默认不开启
          loop: false,
          // 初始化显示视频首帧,播放器默认不会初始化视频,该配置在移动端无效,该配置与autoplay配置项不可同时设置为true
          videoInit: false,
          // 封面图是当播放器初始化后在用户点击播放按钮前显示的图像  require('@/assets/images
          // poster: require('@/assets/images/bg/SeaBreeze.jpg'),
          // 各种插件，播放/暂停、全屏、进度条、音量和画中画插件。
          controlPlugins: [
            playbackRate, // 播放器倍速播放
            volume, //控制条的音量控制组件
            // play, // 控制条的播放/暂停按钮
            // fullscreen, //控制条的全屏切换组件
            progress, //播放器进度条和预览图
            // pip, // 播放器画中画功能
            flex,
          ],
          //传入倍速可选数组
          playbackRate: [0.5, 0.75, 1, 1.5, 2],
          // 默认倍速
          defaultPlaybackRate: null,
          // 视频起播时间（单位：秒）- 记忆播放
          lastPlayTime: 0,
          // 提示文字展示时长（单位：秒）,默认0
          lastPlayTimeHideDelay: 0,
          //视频旋转按钮配置项
          // rotate: {
          //   innerRotate: true, //只旋转内部video
          //   clockwise: false // 旋转方向是否为顺时针
          // },
          // 样式横屏全屏,部分移动端场景的系统默认全屏功能不支持横屏，播放器支持通过配置 rotateFullscreen: true 使触发全屏时实现样式横屏全屏。使用该配置时不需配置rotate和cssFullscreen。
          rotateFullscreen: false,
          // 预览,用户将鼠标指针移动到进度条某处时进度条上方会出现该时刻的视频预览图,服务端提供sprite图(由多张视频预览小图组成)作为预览图资源。
          // thumbnail: {
          //   pic_num: 44,
          //   width: 160,
          //   height: 90,
          //   col: 10,
          //   row: 10,
          //   urls: ['./xgplayer-demo-thumbnail-1.jpg','./xgplayer-demo-thumbnail-2.jpg'],
          //   isShowCoverPreview: false
          // },
          // 视频跳转播放下一集，需提供视频资源列表。
          // playNext: {
          //   urlList: [
          //     'url1',
          //     'url2',
          //     'url3'
          //   ],
          // },
        });

        // 视频旋转事件
        // player.on('rotate',function(deg) {
        //   console.log(deg);// 旋转时会触发rotate事件，角度有四个值90，180，270，0
        // })
      }
    }
  }
</script>

<style scoped>

  /*播放器样式*/
  .playCss {
    /*height: 337.5px;*/
    /*width: 600px;*/
    background-color: black;
    /*background-image: url(../../assets/images/bg/SeaBreeze.jpg);;*/
  }

</style>
